<template>
  <div class="page resident-type-page">
    <nav-bar title="基础信息审核" border></nav-bar>
    <div class="resident-type-main page-main" style="margin-top: 44px">
      <van-row>
        <van-col :span="8" v-for="(item, key) in typeOptions" :key="key">
          <div class="resident-type-item" @click="$router.push(item.path)">
            <div class="resident-type-cont">
              <template v-if="count[item.key] > 0">
                <van-badge :content="count[item.key]" max="99">
                  <img :src="item.iconPath" class="resident-type-img" alt="" />
                </van-badge>
              </template>
              <template v-else>
                <img :src="item.iconPath" class="resident-type-img" alt="" />
              </template>
              <p class="resident-type-text">{{ item.text }}</p>
            </div>
          </div>
        </van-col>
      </van-row>
    </div>
  </div>
</template>
<script>
import Resident from '@/api/resident'
export default {
  data() {
    return {
      typeOptions: [
        {
          text: '本地人口',
          iconPath: require('@/assets/images/resident/basic/icon_resident@2x.png'),
          path: '/resident/audit/list?baseType=1',
          key: 1
        },
        {
          text: '非本地人口',
          iconPath: require('@/assets/images/resident/basic/icon_no_resident@2x.png'),
          path: '/resident/audit/list?baseType=2',
          key: 2
        },
        {
          text: '境外人员',
          iconPath: require('@/assets/images/resident/basic/icon_abroad@2x.png'),
          path: '/resident/audit/list?baseType=3',
          key: 3
        },
        {
          text: '车辆登记',
          iconPath: require('@/assets/images/resident/basic/icon_car@2x.png'),
          path: '/resident/audit/list?baseType=8',
          key: 8
        },
        {
          text: '宠物登记',
          iconPath: require('@/assets/images/resident/basic/icon_pets@2x.png'),
          path: '/resident/audit/list?baseType=9',
          key: 9
        },
        {
          text: '审核记录',
          iconPath: require('@/assets/images/resident/basic/icon_audit_record@2x.png'),
          path: '/resident/record?recordType=2'
        }
      ],
      count: {
        1: 0,
        2: 0,
        3: 0,
        4: 0,
        5: 0,
        6: 0,
        7: 0,
        8: 0,
        9: 0
      }
    }
  },
  created() {
    this.getCount()
  },
  methods: {
    getCount() {
      Resident.Audit.count().then(res => {
        const { status, data } = res.data
        if (status === 0) this.count = data
      })
    }
  }
}
</script>
<style scoped lang="less">
@import '~@/assets/style/resident/entry.less';
</style>
